import { useState } from 'react'
import { motion } from 'framer-motion'
import './OnboardingGuide.css'

interface OnboardingGuideProps {
  userId: string
  onTestStart: () => void
  onTestComplete: (testResult: any) => void
}

const OnboardingGuide = ({ onTestStart }: OnboardingGuideProps) => {
  const [step, setStep] = useState(0)

  const steps = [
    {
      title: '🎮 欢迎来到AI法考备考软件！',
      content: '我们将通过一个轻松的小测试来了解您的法律知识水平，帮您制定最适合的学习计划。',
      button: '开始测试',
      action: () => {
        onTestStart()
        setStep(1)
      }
    }
  ]

  if (step === 0) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="onboarding-guide"
      >
        <div className="guide-card">
          <h2>{steps[0].title}</h2>
          <p>{steps[0].content}</p>
          <button
            className="guide-button"
            onClick={steps[0].action}
          >
            {steps[0].button}
          </button>
        </div>
      </motion.div>
    )
  }

  return null
}

export default OnboardingGuide

